<template>
    <div :class="['playlist',showPlayList?'show':'hide']">
        <div class="head">
            <div class="listsum">
                <span>总{{listTotal}}首</span>
            </div>
            <div class="clear" @click="clear">
                <span class="icon-clear"></span>
            </div>
        </div>
        <ul class="list">
            <li v-for="(item,index) in playList" 
            :key="item.songmid"
            :data-imgmid="item.imgmid"
            :data-songmid="item.songmid"
            :data-songname="item.songname"
            :data-singer="item.singer"
            :class="['list-item',index===curPlayIndex?'active':'']"
            @click="addPlay"
            >
                <span class="songname">{{item.songname}}</span>
                <span class="singer">{{item.singer}}</span>
                <span class="delete" @click="deleteSong" :data-index="index">X</span>
            </li>
        </ul>
        <div class="close" @click="toggleShowPlayList">
            关闭
        </div>
    </div>
</template>

<script>
import {mapState,mapGetters} from 'vuex'
export default {
    name:'playlist',
    computed:{
        ...mapState([
            'playSong',
            'playList',
            'curPlayIndex',
            'showFooter',
            'showDatail',
            'audio',
            'isPlayed',
            'modeType',
            'paused',
            'showPlayList',
        ]),
        ...mapGetters([
            'listTotal',
            'audioSrc'
        ])
    },
    methods:{
        toggleShowPlayList(){
            this.$store.commit('setShowPlayList',!this.showPlayList);
            this.$store.commit('setShowFooter',!this.showFooter);
        },
        addPlay(e){
            if(this.paused){
                this.$store.commit('setPaused');
            }
            let playSong={
                songname:e.currentTarget.dataset.songname,
                singer:e.currentTarget.dataset.singer,
                imgmid:e.currentTarget.dataset.imgmid,
                songmid:e.currentTarget.dataset.songmid
            }
            this.$store.commit('setPlaySong',playSong);
            if(this.listTotal===0){
                this.playList.unshift(playSong);
                this.$store.commit('setCurPlayIndex',0);
                this.$store.commit('setPlayList',this.playList);
            }else{
                for(let key in this.playList){
                    if(this.playList[key].songmid===playSong.songmid){
                        this.$store.commit('setCurPlayIndex',parseInt(key));
                        return;
                    }                  
                }
                this.playList.unshift(playSong);
                this.$store.commit('setPlayList',this.playList);
                this.$store.commit('setCurPlayIndex',0);
            }
        },
        deleteSong(e){
            e.stopPropagation();
            let index=parseInt(e.currentTarget.dataset.index);
            let playList=this.playList;
            let playSongt=this.playSong;
            let curPlayIndex=this.curPlayIndex;
            if(index===curPlayIndex){
                playList.splice(index,1)
                this.$store.commit("setCurPlayIndex", curPlayIndex);
                this.$store.commit("setPlayList",playList)
                if(this.listTotal===0){
                    this.initPlay();
                    return;
                }
                this.$store.commit('setPlaySong',this.playList[curPlayIndex]);
            }else{
                playList.splice(index,1)
                this.$store.commit("setPlayList",playList)
            }
        },
        initPlay(){
            this.$store.commit('setPlaySong',{});
            this.$store.commit('setPlayList',[]);
            this.$store.commit('setCurPlayIndex',-1);
            this.$store.commit('setAudio',null);
            this.$store.commit('setIsPlayed',false);
            this.$store.commit('setPaused',true);
        },
        clear(){
            this.initPlay();
        }
    }
}
</script>

<style scoped>
.show{
    display: block;
}
.hide{
    display: none;
}
.playlist{
    position: absolute;
    width: 100%;
    height: 360px;
    background: rgba(249,249,249,0.9);
    z-index: 100;
    right: 0;
    bottom:0;
}
.list{
    height: 270px;;
    overflow: auto;
}
.head{
    background: rgba(0, 193, 218, 0.8);
    height: 40px;
}
.listsum{
    position: absolute;
    line-height: 40px;
    font-size: 20px;
    margin: 0 10px;
    color: #fff;
}
.clear{
    right: 0;
    position: absolute;
    line-height: 40px;
    font-size: 30px;
    margin: 0 10px;
    color: #fff;
    cursor: pointer;
}
.close{
    cursor: pointer;
    margin: 0;
    position: absolute;
    height: 50px;
    text-align: center;
    line-height: 50px;
    font-size: 20px;
    color: #000;
    width: 100%;
    border-top:1px solid #ccc;
    border-bottom:1px solid #ccc;
}
.list-item{
    border-bottom: 1px solid #ccc;
    height: 29px;
    line-height: 30px;
    position: relative;
    cursor: pointer;
}

.songname,.singer{
    display:inline-block; 
    position: absolute;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.songname{
    max-width: 100px;
    margin: 0 0 0 10px;
}
.singer{
    max-width: 100px;
    left: 200px;
    font-size: 14px;
    color: #999;
}
.delete{
    position: absolute;
    right: 10px;
    color: #999;
}
.active{
    color: #00c1da;
}
.active span{
    color: #00c1da;    
}
</style>


